<app-header></app-header>
<div class="card-container" *ngIf="!caseName">
  <mat-card class="mat-elevation-z8">
    <mat-card-header>
      <mat-card-title>
        开始你的测试！
      </mat-card-title>
      <mat-card-subtitle>
        输入测试名称来继续、或者重新开始一个测试
      </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <form (submit)="onSubmit(name.value)">
        <mat-form-field color="primary">
          <input autofocus required matInput placeholder="测试名称" #name>
        </mat-form-field>
      </form>
    </mat-card-content>
    <mat-card-actions align="end">
      <button type="submit" mat-button color="primary" (click)="onSubmit(name.value)">开始</button>
    </mat-card-actions>
  </mat-card>
</div>
<mat-drawer-container class="main-content" *ngIf="caseName">
  <mat-drawer mode="side" opened>
    <app-case-list [caseName]="caseName" (changeCase)="onChangeCase($event)"></app-case-list>
  </mat-drawer>
  <mat-drawer-content>
    <app-scenario
    [style.visibility]="scenario"
    [stepConfigs]="functionConfig"
    (save)="onSave()"
    ></app-scenario>
    <mat-divider></mat-divider>
    <app-log></app-log>
  </mat-drawer-content>
</mat-drawer-container>
